<!--- 左边轮播图 右边文章 --->
<div class="container main-container div-carousel py-5">
    <div class="row">
        <!-- 左侧轮播图 -->
        <div class="col-8">

            <!--- 轮播图 --->
            <!--- data-bs-ride="carousel"：自动轮播 data-bs-interval="2000"：时间间隔 --->
            <div id="heroCarousel2" class="carousel slide hero-carousel custom-carousel" data-bs-ride="carousel"
                 data-bs-interval="2000">
                <!-- 指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#heroCarousel2" data-bs-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#heroCarousel2" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#heroCarousel2" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                </div>


                <!-- 轮播内容 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://picsum.photos/seed/hero1/1200/500" alt="年度社交峰会现场"
                             class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">2023年度社交峰会圆满结束</h3>
                            <p class="carousel-text">
                                超过5000名用户参与，探讨社交网络的未来发展与创新方向，共同见证平台新功能发布。</p>
                            <button class="btn btn-primary">查看详情</button>
                            <div class="carousel-user">
                                <img src="https://picsum.photos/100/100?random=101" class="carousel-avatar"
                                     alt="李明的头像">
                                <span class="carousel-username">李明 · 旅行摄影师</span>
                                <div class="meta-item">
                                    <i class="far fa-user"></i>
                                    <span>陈明亮</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>2023-06-10</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>8.5k 阅读</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="carousel-item">
                        <img src="https://picsum.photos/seed/hero2/1200/500" alt="社区公益活动" class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">社区公益活动月正式启动</h3>
                            <p class="carousel-text">
                                参与社区公益活动，累积公益时长可兑换专属勋章和平台特权，让我们一起传递正能量。</p>
                            <button class="btn btn-primary">立即参与</button>
                            <div class="carousel-user">
                                <div class="carousel-avatar"
                                     style="background-color: #E8F3FF; display: flex; align-items: center; justify-content: center; color: #165DFF; font-weight: 600;">
                                    王
                                </div>
                                <span class="carousel-username">王芳 · 城市探索者</span>
                                <div class="meta-item">
                                    <i class="far fa-user"></i>
                                    <span>林小雨</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>2023-06-08</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>5.2k 阅读</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="carousel-item">
                        <img src="https://picsum.photos/seed/hero3/1200/500" alt="新功能上线" class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">全新社交互动功能上线</h3>
                            <p class="carousel-text">
                                引入实时互动、内容共创等新功能，让你的社交体验更加丰富多元，连接更紧密。</p>
                            <button class="btn btn-primary">了解新功能</button>
                            <div class="carousel-user">
                                <img src="https://picsum.photos/100/100?random=103" class="carousel-avatar"
                                     alt="张伟的头像">
                                <span class="carousel-username">张伟 · 甜点师</span>
                                <div class="meta-item">
                                    <i class="far fa-user"></i>
                                    <span>王书城</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>2023-06-05</span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-eye"></i>
                                    <span>3.8k 阅读</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <!-- 控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

        </div>

        <!-- 右侧图文展示区域 -->
        <div class="col-4">
            <div class="row g-4 h-100 ">
                <!-- 上方文章 -->
                <div class="card article-card shadow-sm border-0">
                        <img src="https://picsum.photos/400/200?random=4" class="card-img-top article-img"
                             alt="编程开发工作环境设置">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-code me-2 text-primary"></i>
                                Bootstrap5 开发指南
                            </h5>
                            <p class="card-text text-muted">Bootstrap 5
                                是最流行的前端框架，用于开发响应式、移动优先的网站...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="far fa-clock me-1"></i>
                                    2025年10月29日
                                </small>
                                <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                            </div>
                        </div>
                    </div>


                <!-- 下方文章 -->
                <div class="card article-card shadow-sm border-0">
                        <img src="https://picsum.photos/400/200?random=5" class="card-img-top article-img"
                             alt="网页设计创意布局构思">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-palette me-2 text-success"></i>
                                现代网页设计趋势
                            </h5>
                            <p class="card-text text-muted">
                                探索最新的网页设计趋势，包括微交互、玻璃拟态和3D元素的应用...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="far fa-clock me-1"></i>
                                    2025年10月25日
                                </small>
                                <a href="#" class="btn btn-sm btn-outline-success">阅读全文</a>
                            </div>
                        </div>
                    </div>

            </div>
        </div>
    </div>
</div>

